<template>
  <div class="dashboard-container">


    <el-row :gutter="20" style="margin-top:10px;">
<!--      个人信息-->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Person')">
            <div slot="header" class="clearfix" >
              <span>个人信息</span>
            </div>
            <div class="body">
              <span class="desc"> 用户个人信息、修改密码、修改头像等 </span>
            </div>

          </el-card>
        </div>
      </el-col>

      <!--      文章管理-->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Article')">
            <div slot="header" class="clearfix" >
              <span>文章管理</span>
            </div>
            <div class="body">
              <span class="desc"> 文章列表信息、搜索文章、删除文章等 </span>
            </div>
          </el-card>
        </div>
      </el-col>


      <!--      编写文章-->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('ArticleEdit')">
            <div slot="header" class="clearfix" >
              <span>编写文章</span>
            </div>
            <div class="body">
              <span class="desc"> 用户编辑新文章并上传 </span>
            </div>
          </el-card>
        </div>
      </el-col>

      <!--      分类管理 -->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Category')">
            <div slot="header" class="clearfix" >
              <span>分类管理</span>
            </div>
            <div class="body">
              <span class="desc"> 分类列表信息、编辑分类、添加删除分类等 </span>
            </div>
          </el-card>
        </div>
      </el-col>


    <!--      标签管理 -->
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <el-card class="box-card" shadow="hover" @click.native="routerToName('Tags')">
          <div slot="header" class="clearfix" >
            <span>标签管理</span>
          </div>
          <div class="body">
            <span class="desc"> 标签列表信息、标签分类、添加删除标签等 </span>
          </div>
        </el-card>
      </div>
    </el-col>

      <!--      用户管理 -->
      <el-col :span="8">
        <div class="grid-content bg-purple" v-if="roles.indexOf('ADMIN')!=-1">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Users')">
            <div slot="header" class="clearfix" >
              <span>用户管理</span>
            </div>
            <div class="body">
              <span class="desc"> 管理员查看、删除用户 </span>
            </div>
          </el-card>
        </div>
      </el-col>

      <!--      角色管理 -->
      <el-col :span="8" v-if="roles.indexOf('ADMIN')!=-1">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Role')">
            <div slot="header" class="clearfix" >
              <span>角色管理</span>
            </div>
            <div class="body">
              <span class="desc"> 管理员对角色授予权限 </span>
            </div>
          </el-card>
        </div>
      </el-col>


      <!--      权限管理 -->
      <el-col :span="8">
        <div class="grid-content bg-purple" v-if="roles.indexOf('ADMIN')!=-1">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Permission')">
            <div slot="header" class="clearfix" >
              <span>权限管理</span>
            </div>
            <div class="body">
              <span class="desc"> 管理员查看权限信息。并对权限添加、删除、修改 </span>
            </div>
          </el-card>
        </div>
      </el-col>

      <!--      搜索管理 -->
      <el-col :span="8" v-if="roles.indexOf('ADMIN')!=-1">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover" @click.native="routerToName('Search')">
            <div slot="header" class="clearfix" >
              <span>搜索管理</span>
            </div>
            <div class="body">
              <span class="desc"> 管理员使用搜索引擎。对文章创建索引、删除索引、导入文章数据 </span>
            </div>
          </el-card>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  methods:{
    routerToName(name){
      this.$router.push({ name: name })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style>
  //卡片样式
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .desc{
    display: block;
    margin: 10px ;
    line-height: 30px;
    letter-spacing:2px
  }

  .clearfix {
    text-align: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 20px 0;
    width: 100%;
  }

  //文本样式区
  .name-role {
    font-size: 16px;
    padding: 5px;
    text-align: center;
  }

  .sender {
    text-align: center;
  }

  .registe-info {
    text-align: center;
    padding-top: 10px;
  }

  .personal-relation {
    font-size: 16px;
    padding: 0px 5px 15px;
    margin-right: 1px;
    width: 100%
  }

  .relation-item {
    padding: 12px;

  }

  .dialog-footer {
    padding-top: 10px;
    padding-left: 10%;
  }

  //布局样式区
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
